<template>
    <div class="business">
        <div class="business-top" :class="{ 'ispc': mobile == 2 }">
          <div class="left-box">
            <img src="../../assets/images/ico_back2.png" alt="" class="back" @click="$router.go(-1)" />
          </div>
            <div class="title">{{ title }}</div>
          <div class="right-box">
            <img src="../../assets/images/usdtrecord.png" alt="" class="record"
                 @click="$router.push('/businessrecord')" />
          </div>
        </div>
        <div class="business-con">
            <div class="business-info">
                <div class="info-left">
                    <div class="name">{{ $t('new.desc50') }}</div>
                    <div class="price" :class="{ color2: usdtinfo.color == 2 }">{{
                    usdtinfo.closingPrice
                    }}</div>
                    <div class="num" :class="{ color2: usdtinfo.color == 2 }">{{
                    usdtinfo.changeRate
                    }}%</div>
                </div>
                <div class="info-right">
                    <div class="info-item">
                        <div>{{ $t('new.desc51') }}</div>
                        <p>{{ usdtinfo.highestPrice }}</p>
                    </div>
                    <div class="info-item">
                        <div>{{ $t('new.desc52') }}</div>
                        <p>{{ usdtinfo.volume }}</p>
                    </div>
                    <div class="info-item">
                        <div>{{ $t('new.desc53') }}</div>
                        <p>{{ usdtinfo.lowestPrice }}</p>
                    </div>
                    <div class="info-item">
                        <div>{{ $t('new.desc54') }}</div>
                        <p>{{ usdtinfo.turnover }}</p>
                    </div>
                </div>
            </div>
            <div class="business-line">
                <div class="line-time">
                    <div :class="{ timeact: timeAct == index }" v-for="(item, index) in timerLine" :key="item.id"
                        @click="handlerLine(index)">
                        {{ item.name }}</div>
                </div>
                <div id="echarts" ref="mychart"></div>
                <Vue-kline :klineData="lineList" :klineParams="klineParams" ref="callMethods"></Vue-kline>
            </div>
            <div class="business-order" v-if="false">
                <div class="order-type">
                    <div :class="{ tabact: current == 0 }" @click="handlerList(0)">{{ $t('new.desc55') }}</div>
                    <div :class="{ tabact: current == 1 }" @click="handlerList(1)">{{ $t('new.desc56') }}</div>
                </div>
                <div class="order-title">
                    <div class="flexcenter">{{ $t('new.desc57') }}</div>
                    <div class="flexcenter">{{ $t('new.desc58') }}</div>
                    <div class="flexcenter">{{ $t('new.desc59') }}</div>
                    <div class="flexcenter">{{ $t('new.desc60') }}</div>
                    <div class="flexcenter">{{ $t('new.desc61') }}</div>
                </div>
                <div class="order-list" >
                    <van-list v-model="loading" :finished="finished" :loading-text="$t('load.loading')" @load="onLoad">
                        <van-cell v-for="(item, index) in list" :key="index">
                            <div class="order-info">
                                <div class="flexcenter">
                                    <img :src="item.avatar" alt="" v-if="item.avatar != null" />
                                    <img src="../../assets/images/photo3.png" alt="" v-else />
                                </div>
                                <div class="flexcenter">{{ item.createTime }}</div>
                                <div class="flexcenter">
                                    <span v-if="item.upDown == 1 && current == 1" class="color1">{{ $t('new.desc74')
                                    }}</span>
                                    <span v-else-if="item.upDown == 2 && current == 1" class="color2">{{
                                    $t('new.desc75')
                                    }}</span>
                                    <span v-else-if="item.type == 0 && current == 0" class="color1">{{ $t('new.desc74')
                                    }}</span>
                                    <span v-else class="color2">{{ $t('new.desc75') }}</span>
                                </div>
                                <div class="flexcenter">
                                    <span v-if="current == 1">{{ item.toPrice }}</span>
                                    <span v-else-if="current == 0 && item.status == 1">{{ item.openingPrice }}</span>
                                    <span v-else-if="current == 0 && item.status == 0">{{ $t('new.desc88') }}</span>
                                </div>
                                <div class="flexcenter" v-if="current == 1">
                                    {{ item.profitLossAmount }}
                                </div>
                                <div class="flexcenter" v-else-if="item.status == 0 && current == 0">
                                    <p>{{ $t('new.desc90') }}</p>
                                    <p>
                                        <van-count-down :time="item.laveSeconds * 1000"
                                            @finish="handlerFinsh($event, item.sn, index)" />
                                    </p>
                                </div>
                                <div class="flexcenter" v-else-if="item.status == 1 && current == 0">
                                    <span v-if="item.profitStatus == 0">+</span><span v-else>-</span> {{
                                    item.incomeAmount
                                    }}
                                </div>
                            </div>
                        </van-cell>
                    </van-list>
                    <div class="null-data" v-if="showNull">
                        <img src="../../assets/images/trade_empty.png" alt="" />
                        <p>{{ $t('toast.no_data') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="business-footer" :class="{ 'ispc': mobile == 2 }">
            <div class="footer-btn1 flexcenter" @click="handlerBuy(0)">
                {{ $t('new.doc18') }}
            </div>
            <div class="footer-btn2 flexcenter" @click="handlerBuy(2)">{{ $t('new.doc19') }}</div>
        </div>
        <!-- 支付订单 -->
        <van-popup v-model="showBuy" :class="{ 'ispcmodal': mobile == 2 }" round :closeable="true">
            <div class="business-buy">
                <div class="title">{{ $t('new.desc64') }}</div>
                <div class="buy-info">
                    <div class="info-title">{{ $t('new.desc65') }}</div>
                    <div class="info-list">
                        <div class="item" :class="{ infoact: infocurrent == index }" v-for="(item, index) in configinfo"
                            :key="item.id" @click="handlerItem(item, index)">
                            <div>{{ item.second }}S</div>
                            <p>{{ $t('new.desc67') }}:{{ item.incomeRatio * 100 }}%</p>
                        </div>
                    </div>
                    <div class="info-title">{{ $t('new.desc66') }}</div>
                    <div class="info-input">
                        <input type="text" v-model="amount" onkeyup="value=value.replace(/[^\d^\.]+/g,'')"
                            :placeholder="$t('new.desc73', { n1: seleconfig.min })" @change="handlerMoney" />
                        <p @click="amount = ''">{{ $t('word.cancle') }}</p>
                    </div>
<!--                    <div class="info-amount">-->
<!--                        <div class="amout-info">{{ $t('new.desc68') }} <span>{{ amount || 0 }}</span> </div>-->
<!--                        <div class="amount-type">-->
<!--                            {{ $t('new.desc69') }} <span v-if="buytype == 0" style="color:#00BA7E;">{{ $t('new.desc62')-->
<!--                            }}</span><span v-else>{{ $t('new.desc63') }}</span>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="info-amount">
                        <div class="amout-info">{{ $t('new.desc70') }}$ <span style="color:#fff">{{
                        usdtinfo.closingPrice
                        }}</span> </div>
                        <div class="amount-type">
                            {{ $t('new.desc71') }} <span style="color:#fff">{{ profit }}</span>
                        </div>
                    </div>
<!--                    <div class="info-btn">-->
<!--                        <div class="flexcenter" @click="handlerBuyTab(0)">{{ $t('new.desc62') }}</div>-->
<!--                        <div class="flexcenter" @click="handlerBuyTab(2)">{{ $t('new.desc63') }}</div>-->
<!--                    </div>-->
                    <div class="info-buy-btn flexcenter" @click="handlerSubmit">{{ $t('new.desc72') }}</div>
                </div>

            </div>
        </van-popup>
        <!-- 支付成功 -->
        <van-popup v-model="showSuccess" :class="{ 'ispcmodal': mobile == 2 }" round :closeable="true">
            <div class="business-buy">
                <div class="title">{{ $t('new.desc77') }}</div>
                <div class="tips" v-if="payinfo.status == 0">{{ $t('new.desc78') }} <span v-if="ismax == 0">{{
                $t('new.desc79')
                }}</span><span v-else>{{ $t('new.desc80') }}</span></div>
                <div class="circle">
                    <van-circle v-model="currentRate" :rate="circlerate" :speed="1" color="#3b63da" size="200">
                        <template #default="text">
                            <div class="circle-text" v-if="payinfo.status == 0 && payinfo.laveSeconds > 0">{{ timetext
                            }}
                            </div>
                            <div class="circle-text1" v-else-if="payinfo.status == 0 && payinfo.laveSeconds == 0">
                                {{ $t('new.desc88') }}</div>
                            <div class="circle-status" v-else-if="payinfo.status == 1">
                                <div>{{ $t('new.desc89') }}</div>
                                <p><span v-if="payinfo.profitStatus==0">+</span><span v-else>-</span>{{payinfo.incomeAmount}}</p>
                            </div>

                        </template>
                    </van-circle>
                </div>
                <div class="pay-price">
                    {{ $t('new.desc81') }}{{ payinfo.buyPrice }}
                </div>
                <div class="pay-price">
                    {{ $t('new.desc82') }} <span>{{ usdtinfo.closingPrice }}</span>
                </div>
<!--                <div class="pay-infobtn">-->
<!--                    <div>{{ $t('new.desc83') }} <span v-if="payinfo.type == 2" style="color:#D23951">{{ $t('new.desc75')-->
<!--                    }}</span> <span v-else style="color:#00BA7E">{{ $t('new.desc74') }}</span></div>-->
<!--                    <div>{{ $t('new.desc84') }}{{ payinfo.amount }}</div>-->
<!--                </div>-->
                <div class="pay-moreinfobtn">
                    <div :class="{ btn2: nextId != 0, btn1: nextId == '-1' }" @click="handlerNextOrder(0)">{{
                    $t('new.desc85')
                    }}</div>
                    <div :class="{ btn3: nextId == 0, btn4: nextId > 0 }" @click="handlerNextOrder(1)">{{
                    $t('new.desc86')
                    }}
                    </div>
                </div>
                <div class="par-next flexcenter" @click="handlerNextPay">{{ $t('new.desc87') }}</div>
            </div>
        </van-popup>
        <!-- 交易密码 -->
        <setTrade :hasTrue="info.hasSetPassword" v-if="showSet" :showSet="showSet" @handlerClose="handlerClose">
        </setTrade>
    </div>
</template>

<script>
const upColor = '#00da3c';
const downColor = '#ec0000';
import VueKline from "vue-kline";
export default {
    components: {
        VueKline,
    },
    data() {
        return {
            klineParams: {
                theme: "dark",
                language: "zh-cn",
                depthWidth:30,
                count: 1,
            },
            info: {},
            showSet: false,
            mobile: localStorage.getItem('ismobile'),
            timeAct: 0,
            timetext: '',
            circlerate: 0,
            currentRate: 0,
            showSuccess: false,
            showBuy: false,
            title: '',
            socket: null,
            code: '',
            time: '1min',
            usdtinfoname: '',
            usdtlinename: '',
            usdtinfo: {
                closingPrice: 0,
                changeRate: 0,
                color: 0,
                highestPrice: 0,
                volume: 0,
                lowestPrice: 0,
                turnover: 0,
                sellCoinId: 1
            },
            usdtline: [],
            buyCoinId: 0,
            current: 0,
            finished: false,
            loading: false,
            list: [],
            page: 1,
            configinfo: [],
            buytype: 0,
            infocurrent: 0,
            seleconfig: {},
            amount: '',
            totalMoney: 0,
            isbtn: true,
            sellCoinId: 1,
            payinfo: {},
            timerNull: null,
            userOrderlist: [],
            nextId: 0,
            showNull: false,
            timerLine: [
                {
                    id: '',
                    name: this.$t('new.desc118')
                },
                {
                    id: '1min',
                    name: this.$t('new.desc119')
                },
                {
                    id: '5min',
                    name: this.$t('new.desc120')
                },
                {
                    id: '15min',
                    name: this.$t('new.desc121')
                },
                {
                    id: '30min',
                    name: this.$t('new.desc122')
                }, {
                    id: '60min',
                    name: this.$t('new.desc123')
                }, {
                    id: '1day',
                    name: this.$t('new.desc124')
                }, {
                    id: '1week',
                    name: this.$t('new.desc125')
                }, {
                    id: '1mon',
                    name: this.$t('new.desc126')
                }
            ],
            lineList: {}
        }
    },
    created() {
        this.title = this.$route.query.id;
        this.code = this.$route.query.code;
        this.buyCoinId = this.$route.query.coinid;
        this.sellCoinId = this.$route.query.sellCoinId;
    },
    mounted() {
        this.getData();
        this.getconfig();
        this.getMoney();
        this.$post(this.URL.member.personal, {}).then(res => {
            if (res.code == 0) {
                this.info = res.data
            } else {
                this.$toast(res.message)
            }
        })
        let lang = localStorage.getItem('language');
        if (lang == 'zh') {
            lang = 'zh-cn'
        } else{
            lang = 'en-us'
        }
       this.$refs.callMethods.setLanguage(lang)
       this.$refs.callMethods.resize(this.$refs.mychart.offsetWidth, this.$refs.mychart.offsetHeight)

    },
    computed: {
        ismax() {
            let num = 0;
            if (this.payinfo.buyPrice != undefined) {
                if (parseFloat(this.payinfo.buyPrice) - parseFloat(this.usdtinfo.closingPrice) > 0) {
                    num = 1;
                }
            }
            return num;
        },
        profit() {
            let total = 0;
            if (this.amount != '') {
                total = this.amount * this.seleconfig.incomeRatio;
                total = total.toFixed(2)
            }
            return total;
        }
    },
    methods: {
        handlerLine(i) {
            let time = this.timerLine[i].id;
            if (time == '') {
                time = this.timerLine[1].id
            }
            this.time = time;
            this.timeAct = i;
            this.lineList ={};
            this.socket.close();
            this.getData()
        },

        handlerClose() {
            this.showSet = false;
            this.$post(this.URL.member.personal, {}).then(res => {
                if (res.code == 0) {
                    this.info = res.data
                } else {
                    this.$toast(res.message)
                }
            })
        },
        handlerFinsh(e, sn, i) {
            this.$post(this.URL.user.orderinfo, {
                sn: sn
            }).then(res => {
                if (res.code == 0) {
                    this.list[i] = res.data;
                    this.userOrderlist = this.list;
                }
            })
        },
        handlerNextOrder(i) {
            let nexti = this.userOrderlist.findIndex(item => item.sn == this.payinfo.sn);
            if (nexti >= 0 && i == 0) {
                this.getorderInfo(this.userOrderlist[nexti + 1].sn);
                this.nextId = nexti + 1;
            } else if (nexti == this.userOrderlist.length - 1 && i == 0) {
                this.nextId = '-1'
            } else if (nexti == 0 && i == 1) {
                this.nextId = 0;
            } else {
                this.getorderInfo(this.userOrderlist[nexti - 1].sn);
                this.nextId = nexti - 1;
            }
            clearInterval(this.timerNull)
        },
        handlerNextPay() {
            clearInterval(this.timerNull);
            this.showSuccess = false;
            this.showBuy = true;
            this.amount = '';
        },
        getMoney() {
            this.$post(this.URL.withdrawal.wallet, {}).then(res => {
                if (res.code == 0) {
                    this.totalMoney = res.data.totalUSDTBalance
                }
            })
        },
        handlerSubmit() {
            let _this = this;

            if (this.amount > parseFloat(this.totalMoney)) {
                this.$toast(this.$t('new.desc76'))
                return;
            }
            if (this.isbtn) {
                this.isbtn = false;
                this.$post(this.URL.user.parOrder, {
                    type: this.buytype,
                    configId: this.seleconfig.id,
                    amount: this.amount,
                    buyCoinId: this.buyCoinId,
                    sellCoinId: this.sellCoinId
                }).then(res => {
                    if (res.code == 0) {
                        this.isbtn = true;
                        this.showBuy = false;
                        this.showSuccess = true;
                        this.getTimer(res.data);
                        this.getMoney();
                        this.list = [];
                        this.page = 1;
                        this.finished = false;
                        this.loading = false;
                        this.onLoad();
                    } else {
                        this.$toast(res.message)
                        this.isbtn = true;
                    }
                })
            }
        },
        handlerList(i) {
            this.current = i;
            this.list = [];
            this.page = 1;
            this.showNull = false;
            this.finished = false;
            this.loading = false;
            this.onLoad();
        },
        getTimer(info) {
            let _this = this, timenum = info.timeInterval;
            this.payinfo = info;
            _this.timerNull = setInterval(() => {
                if (_this.payinfo.laveSeconds == 0) {
                    clearInterval(_this.timerNull);
                    _this.getorderInfo(_this.payinfo.sn)
                } else {
                    _this.payinfo.laveSeconds--;
                    let rate = parseFloat((timenum - this.payinfo.laveSeconds) / timenum) * 100
                    rate = rate.toFixed(0)
                    _this.circlerate = parseFloat(rate);
                    _this.currentRate = parseFloat(rate)
                    _this.timetext = `${_this.payinfo.laveSeconds}`;
                }
            }, 1000)
        },
        getorderInfo(sn) {
            this.$post(this.URL.user.orderinfo, {
                sn: sn
            }).then(res => {
                if (res.code == 0) {
                    this.payinfo = res.data;
                    if (this.payinfo.laveSeconds > 0) {
                        this.getTimer(this.payinfo)
                    }
                }
            })
        },
        handlerBuyTab(i) {
            this.buytype = i;
            this.getconfig(1);
        },
        handlerItem(item, i) {
            this.seleconfig = item;
            this.infocurrent = i;
        },
        handlerMoney(val) {
            if (this.amount > parseFloat(this.seleconfig.max)) {
                this.amount = this.seleconfig.max;
            }
        },
        handlerBuy(i) {
            // if (!this.info.hasSetPassword) {
            //     this.showSet = true;
            //     return;
            // }
            this.buytype = i;
            this.getconfig(0);
            this.showBuy = true;
            this.amount = '';
            this.infocurrent = 0;
        },
        getconfig() {
            this.$post(this.URL.member.iconconfig, {
                buyCoinId: this.buyCoinId,
                type: this.buytype
            }).then(res => {
                if (res.code == 0) {
                    this.configinfo = res.data;
                    if (i == 0) {
                        this.seleconfig = res.data[0]
                    } else {
                        this.seleconfig = res.data[this.infocurrent]
                    }

                }
            })
        },
        onLoad() {
            setTimeout(() => {
                let postUrl = this.URL.user.order, params = {
                    page: this.page,
                    pageSize: 10,
                    buyCoinId: this.buyCoinId
                };
                if (this.current == 1) {
                    postUrl = this.URL.user.allorder, params = {
                        page: this.page,
                        pageSize: 10,
                    }
                }
                this.showNull = false;
                this.$post(postUrl, params).then(res => {
                    if (res.code == 0) {
                        if (this.page == 1) {
                            this.list = res.data.list;
                        } else {
                            this.list = this.list.concat(res.data.list)
                        }
                        if (this.current == 0) {
                            this.userOrderlist = this.list;
                        }
                        if (this.list.length == 0) {
                            this.showNull = true;
                        }
                        if (res.data.list.length > 9) {
                            this.page++;
                        }
                        this.loading = false;
                        if (this.list.length >= parseFloat(res.data.page.count)) {
                            this.finished = true;
                        }
                    }
                })
            }, 500);
        },
        getData() {
            let _this = this;
            if (typeof WebSocket == "undefined") {
            } else {
                _this.socket = new WebSocket(process.env.WSS_URL_API)
                _this.usdtinfoname = `market_info_${_this.code}`;
                _this.usdtlinename = `market_kline_${_this.code}_${_this.time}`;
                _this.socket.onopen = function () {
                    _this.socket.send(`start:topic=${_this.usdtinfoname}`);
                    _this.socket.send(`start:topic=${_this.usdtlinename}`);
                };
                //获得消息事件
                _this.socket.onmessage = function (msg) {

                    let data = JSON.parse(msg.data);

                    if (data.data != undefined) {
                        if (data.topic == _this.usdtinfoname) {
                            let color = 0;
                            if (parseFloat(_this.usdtinfo.closingPrice) < parseFloat(data.data.closingPrice)) {
                                color = 2
                            } else {
                                color = 0
                            }
                          console.log("======data",data)
                            _this.usdtinfo = {
                                closingPrice: data.data.closingPrice,
                                changeRate: data.data.changeRate,
                                highestPrice: data.data.highestPrice,
                                volume: data.data.volume,
                                lowestPrice: data.data.lowestPrice,
                                turnover: data.data.turnover,
                                color: color,
                                sellCoinId: data.data.sellCoinId == null ? _this.usdtinfo.sellCoinId : data.data.sellCoinId
                            }
                        } else {
                            let lineAll = data.data, lines = [], asks = [], bids = [];
                            if (lineAll.length > 20) {
                                lineAll.forEach(e => {
                                    let arr = [e.timestamp, parseFloat(e.openingPrice), parseFloat(e.highestPrice), parseFloat(e.lowestPrice), parseFloat(e.closingPrice), parseFloat(e.volume)]
                                    lines.push(arr)
                                   bids.push([e.turnover,e.volume])
                                })
                                _this.lineList = {
                                'success': true,
                                'data': {
                                    'depths': {
                                        'asks': [],
                                        'bids': bids
                                    },
                                    'lines': lines
                                }
                            }
                            _this.$refs.callMethods.redraw();
                            _this.$refs.callMethods.kline.chartMgr.getChart().updateDataAndDisplay(_this.lineList.data.lines)
                            }

                        }
                    }
                };
                //关闭事件
                _this.socket.onclose = function () {
                    console.log('关闭')
                    // _this.getData();
                };
                //发生了错误事件
                _this.socket.onerror = function () {
                    //_this.getData();
                    console.log('错误')
                    //此时可以尝试刷新页面
                };
            }
        }
    },
    destroyed() {
        this.socket.close()
    }
}
</script>

<style lang="less" scoped>
.business {
    min-height: 100vh;
    background: #0B0F16;

    .business-top {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.04rem;
        background: #fff;
        z-index: 6;
        text-align: center;
        line-height: 1.04rem;
        display: flex;
        align-items: center;
      .right-box,.left-box{
        width: 1.02rem;
        height: .64rem;
        display: flex;
        align-items: center;
        flex-shrink: 0;

      }
        .back {
          width: 1.02rem;
          height: .64rem;
          margin-left: 10px;
        }

        .title{
            flex: 1;
            font-size: .4rem;
            color: rgba(50, 50, 50, 1);
           align-items: center;
        }

      .right-box{
        .record {
          width: .48rem;
          height: .48rem;
          top: -0.08rem;
          position: relative;
          align-self: flex-end;
        }
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
      }

    }

    .business-con {
        padding: .98rem 0 1.5rem;

        .business-info {
            padding: .32rem;
            background: #161C28;
            display: flex;

            .info-left {
                flex: 0 0 50%;

                .name {
                    font-size: .26rem;
                    color: #737B8D;
                }

                .price {
                    height: .85rem;
                    line-height: .85rem;
                    font-size: .46rem;
                    color: #F5435A;
                }

                .num {
                    font-size: .28rem;
                    color: #F5435A;
                }

                .color2 {
                    color: #00BA7E;
                }
            }

            .info-right {
                flex: 0 0 50%;
                display: flex;
                flex-wrap: wrap;

                .info-item {
                    flex: 0 0 50%;
                    margin-bottom: .26rem;
                    font-size: .2rem;
                    color: #737B8D;

                    &:nth-last-child(-n+2) {
                        margin-bottom: 0;
                    }

                    div {
                        margin-bottom: .14rem;
                    }

                    p {
                        font-size: .22rem;
                        color: #FFFFFF;
                        word-break: break-all;
                    }
                }
            }
        }

        .business-line {
            position: relative;
            margin: .1rem 0;
            height: 6.58rem;
            background: #161C28;
            overflow: hidden;
            .line-time {
                padding: 0.28rem;
                display: flex;
                font-size: .22rem;
                color: #999;

                div {
                    position: relative;
                    margin-right: .2rem;

                    &:last-child {
                        margin-right: 0;
                    }
                }

                .timeact {
                    color: #fff;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -.2rem;
                        left: 0;
                        width: 100%;
                        height: 0.05rem;
                        background: #fff;
                        border-radius: .1rem;
                    }
                }
            }

            #echarts {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 6.58rem;
                z-index: -5;
            }
        }

        .business-order {
            padding: 0 .2rem;
            background: #161c28;

            .order-type {
                padding: .2rem;
                display: flex;

                div {
                    flex: 0 0 50%;
                    text-align: center;
                    font-size: .28rem;
                    color: #737e9e;
                }

                .tabact {
                    color: #fff;
                }
            }

            .order-title {
                display: flex;
                justify-content: space-between;

                div {
                    flex: 0 0 .8rem;
                    height: .6rem;
                    font-size: .24rem;
                    color: #737e9e;
                    justify-content: left;

                    &:nth-child(2) {
                        flex: 0 0 2rem;
                    }

                    &:nth-child(3) {
                        flex: 0 0 .8rem;
                    }

                    &:nth-child(4) {
                        flex: 0 0 1.5rem;
                    }

                    &:last-child {
                        flex: 0 0 1.8rem;
                    }
                }
            }

            .null-data {
                padding: .5rem 0;
                text-align: center;
                font-size: .26rem;
                color: #737B8D;

                img {
                    width: 1.4rem;
                    margin-bottom: .2rem;
                }
            }

            /deep/ .van-cell {
                padding: 0;
                background-color: rgba(0, 0, 0, 0);

                &::after {
                    border-bottom: 0.02rem solid rgba(255, 255, 255, 0.1);
                    left: 0;
                    right: 0;
                }

                .order-info {
                    display: flex;
                    justify-content: space-between;
                    padding: .2rem 0;

                    div {
                        flex: 0 0 .8rem;
                        font-size: .24rem;
                        color: #737e9e;
                        justify-content: left;

                        img {
                            width: .6rem;
                            height: .6rem;
                            border-radius: 50%;
                            object-fit: cover;
                        }

                        &:nth-child(2) {
                            flex: 0 0 2rem;
                        }

                        &:nth-child(3) {
                            flex: 0 0 .8rem;
                        }

                        &:nth-child(4) {
                            flex: 0 0 1.5rem;
                        }

                        &:last-child {
                            flex: 0 0 1.8rem;
                            flex-wrap: wrap;

                            p {
                                flex: 0 0 100%;
                            }
                        }
                    }

                    .color2 {
                        color: #F5435A;
                    }

                    .color1 {
                        color: #00BA7E;
                    }
                }
            }
        }
    }

    .business-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: .16rem 0;
        background: #161C28;
        display: flex;
        justify-content: center;
        font-size: .32rem;
        color: #FFFFFF;

        .footer-btn1 {
            flex: 0 0 3.5rem;
            height: 0.88rem;
            background: url('../../assets/images/buy_up.png') center no-repeat;
            background-size: 100% 100%;
        }

        .footer-btn2 {
            flex: 0 0 3.5rem;
            height: 0.88rem;
            background: url('../../assets/images/buy_down.png') center no-repeat;
            background-size: 100% 100%;
        }
    }
}

/deep/ .van-popup {
    background-color: rgba(0, 0, 0, 0.5);
}

.business-buy {
    width: 6rem;

    .title {
        padding: .33rem;
        color: #fff;
        font-size: .36rem;
        text-align: center;
        border-bottom: 0.01rem solid rgba(255, 255, 255, 0.2);
    }

    .tips {
        padding: .2rem 0;
        text-align: center;
        font-size: .28rem;
        color: #fff;
    }

    .circle {
        text-align: center;

        /deep/ .van-circle {
            width: 1.6rem !important;
            height: 1.6rem !important;
        }

        .circle-text {
            font-size: 0.5rem;
            color: #fff;
            line-height: 1.5rem;
        }

        .circle-text1 {
            font-size: 0.32rem;
            color: #fff;
            line-height: 1.5rem;
        }

        .circle-status {
            font-size: .26rem;
            color: #fff;

            div {
                padding: .4rem 0 0;
            }

            p {
                font-size: .3rem;
            }
        }
    }

    .pay-price {
        text-align: center;
        padding-top: .1rem;
        font-size: .26rem;
        color: #fff;

        span {
            color: #D23951;
        }
    }

    .pay-infobtn {
        display: flex;
        padding: 0.2rem .2rem .1rem;
        justify-content: space-between;

        div {
            flex: 0 0 48%;
            height: .6rem;
            line-height: .54rem;
            color: #fff;
            background: rgba(214, 217, 221, 0.1);
            border: 0.02rem solid rgba(255, 255, 255, 0.3);
            text-align: center;
            border-radius: .08rem;
        }


    }

    .btn1 {
        line-height: .54rem;
        background: none !important;
        border: 0.02rem solid #fff !important;
    }

    .btn2 {
        line-height: .54rem;
        background: none !important;
        border: 0.02rem solid #3b63da !important;
    }

    .btn3 {
        line-height: .6rem;
        background: rgba(255, 255, 255, 0.3) !important;
        border: 0 !important;
    }

    .btn4 {
        line-height: .6rem;
        background: #3b63da !important;
        border: 0 !important;
    }

    .par-next {
        width: 5.6rem;
        height: .8rem;
        margin: .2rem auto 0;
        background: #FFA029;
        color: #fff;
        font-size: .28rem;
        border-radius: 0.08rem;
    }

    .pay-moreinfobtn {
        padding: 0 .2rem;
        display: flex;
        justify-content: space-between;

        div {
            flex: 0 0 48%;
            height: .6rem;
            line-height: .6rem;
            color: #fff;
            background: rgba(214, 217, 221, 0.1);
            border: 0.02rem solid rgba(255, 255, 255, 0.3);
            text-align: center;
            border-radius: .08rem;
        }
    }

    .buy-info {
        padding: 0 .2rem;

        .info-title {
            padding: .29rem 0 .2rem;
            font-size: .26rem;
            color: #fff;
        }

        .info-list {
            display: flex;
            flex-wrap: wrap;

            .item {
                flex: 0 0 32%;
                margin-right: 2%;
                padding: .2rem 0;
                color: #fff;
                background: rgba(214, 217, 221, 0.1);
                border: 0.02rem solid rgba(255, 255, 255, 0.3);
                box-sizing: border-box;
                text-align: center;
                font-size: .2rem;
                border-radius: 0.08rem;
                margin-bottom: .2rem;

                &:last-of-type(-n+3) {
                    margin-bottom: 0;
                }

                &:nth-child(3n) {
                    margin-right: 0;
                }

                div {
                    font-size: .38rem;
                }
            }

            .infoact {
                background: #3b63da;
                border: 0.02rem solid #3b63da;
            }
        }

        .info-input {
            display: flex;
            height: .8rem;
            padding: 0 .1rem;
            background: rgba(214, 217, 221, 0.1);
            border: 0.02rem solid rgba(255, 255, 255, 0.3);
            border-radius: .08rem;

            input {
                flex: 1;
                height: .76rem;
                color: #fff;
                font-size: .28rem;
                border: 0;
                background: none;
            }

            p {
                font-size: .28rem;
                color: rgb(214, 217, 221);
                line-height: .76rem;
            }
        }

        .info-amount {
            padding: .1rem 0;
            display: flex;
            justify-content: space-between;
            font-size: .24rem;
            color: rgb(214, 217, 221);

            span {
                color: #D23951;
            }
        }

        .info-btn {
            display: flex;
            justify-content: space-between;

            div {
                flex: 0 0 48%;
                height: .6rem;
                font-size: .22rem;
                color: #fff;
                background: #F5435A;
                border-radius: 0.08rem;

                &:first-child {
                    background: #00BA7E;
                }
            }
        }

        .info-buy-btn {
            margin-top: .2rem;
            height: .6rem;
            font-size: .22rem;
            color: #fff;
            background: #3b63da;
            border-radius: 0.08rem;
        }
    }
}
</style>
